import React, { Component } from "react";

export default class Form extends Component {
    static defaultProps = {
        defaultUsername: "zhangsan",
        btnText: "登录"
    }

    state = {
        username: this.props.defaultUsername
    }

    onUsernameChange = (e) => {
        console.log(e.target.value);
        this.setState({ username: e.target.value });
        this.props.sayHello && this.props.sayHello();
    }

    render() {
        const { username } = this.state;
        const { btnText, windowWidth } = this.props;
    return (
        <div>
            <h4>{username}</h4>
        <form>
                <input
                    type="text"
                    placeholder="用户名"
                    style={{ textIndent: ".5em", }}
                    onChange={this.onUsernameChange}
                    value={username}
                />
                <input type="submit" value={btnText} />
                <div>窗口宽度：{windowWidth}</div>
        </form>
      </div>
    );
  }
}
